<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="zhinengjiaohu.css">
    <style>
    a{
        text-decoration: none;
    }  
    
    
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="width: 1900px;margin: 0 auto;">
            <div>
                <div style="margin: 0 auto;background-color: #f5f5f5;width: 100%;height: 50px">
                    <el-row gutter="50" style="margin: 0 300px;">
                        <el-col :span="16">
                            <div class="grid-content bg-purple1" style="line-height: 50px; ">
                            <a style="color:#6666;" href="">萤石官网</a>
                            <a style="color:#6666;padding-left: 15px;" href="">开发者平台</a>
                            <a style="color:#6666;padding-left: 15px;" href="">招商加密</a>
                            <a style="color:#6666;padding-left: 15px;" href="">集团客户</a>
                            <a style="color:#6666;padding-left: 15px;" href="">进入萤石云</a>
                        </div>
                        </el-col>
                        
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light2" style="line-height: 50px;">
                            <a style="color:#6666;padding-left: 60px;" href="">登录</a>
                            <a style="color:#6666;padding-left: 15px;" href="">注册</a>
                            <a style="color:#6666;padding-left: 15px;" href="">我的订单</a>
                            <a style="color:#6666;padding-left: 15px;font-size: 20px" href="">
                                <i class="el-icon-shopping-cart-1">(0)</i></a>
                            <a style="color:#6666;padding-left: 9px;" href="">App下载</a>
                        </div></el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="15">
                            <div class="grid-content bg-purple3" style="margin: 0 310px">
                            <img src="imgs/logo.png" width="180" alt="">
                        </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="grid-content bg-purple-light4" style="width: 450px;margin: 10px 0 0 60px;">
                            <el-input type="text" placeholder="请输入搜索的内容">
                                <!--slot="append"设置搜索按钮嵌入到文本框里面-->
                                <el-button slot="append" icon="el-icon-search">
                                    
                                </el-button>
                            </el-input>
                        </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="24">
                            <div class="Spinner" style="margin: 15px 300px">
                            <a href="" style="color:#6666; font-size: 18px;  ">摄像机</a>
                            <a href="" style="color:#6666; font-size: 18px; padding:0 15px">智能锁</a>
                            <a href="" style="color:#6666; font-size: 18px; padding:0 15px">猫眼门铃</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">机器人</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">智能养老</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">生活电器</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">全屋网络</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">智能交互</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">智能传感</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">智能照明</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">智能面板</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">系统方案</a>
                            <a href="" style="color:#6666; font-size: 18px;  padding:0 15px">配件</a>
                        </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-header>
        <el-main style="width: 1900px;margin: 100px auto">
            <div class="product-main">
                <el-row gutter="20">
                    <el-col :span="16">
                        <div class="grid-content bg-purple5" style="margin: 0 300px;font-size: 20px;font-size: 20px;">
                            A3智能无线网关【新升级】
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light6" style="font-size: 15px;">
                            <a style="color: red" href="">概述</a>
                            <el-divider direction="vertical"></el-divider>
                            <a style="color: black" href="">详细参数</a>
                            <el-divider direction="vertical"></el-divider>
                            <a style="color: black" href="">评论(0)</a>
                            <el-divider direction="vertical"></el-divider>
                            <a style="color: black" href="">附进体验店</a>
                            <el-button
                                    style="height: 30px; vertical-align: middle; line-height: 5px; background-color:#ff6102;color: white;">
                                加入购物车
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
                <div class="tab_cont tab">
                    <ul style="list-style: none">
                        <li id="cont1" class="item_con">
                            <div class="pwhole">
                                <img src="znjh/1.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/2.jpg">
                            </div>
                            <div class="pwhole banner" style="position: relative;">
                                <img src="znjh/3.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/4.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/5.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/6.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/7.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/8.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/9.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/10.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/11.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/12.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/13.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="znjh/14.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="imgs/15.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="imgs/16.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="imgs/17.jpg">
                            </div>
                            <div class="pwhole">
                                <img src="imgs/18.jpg">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </el-main>
        <el-footer>
            <div>
            </div>
            <div style="text-align: center;background-color: #3f3f3f;
            color: #b1b1b1;padding: 30px 0">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        methods: {}
    })
</script>
</html>